
import { Component, useState } from "react"

class Fahrenheit extends Component {

  render() {
    let { value, onChange } = this.props;
    let change = e => {
      console.log(e.target.value);
      let temper = (Number(e.target.value) - 32) / 1.8;
      onChange(temper)
    }
    return (
      <div>
        <label>华氏温度：</label>
        <input type="text" value={value * 1.8 + 32} onChange={change} />
      </div>
    )
  }
}
function Celsius(props) {
  let { value, onChange } = props;
  let change = (e) => {
    onChange(e.target.value)
  }
  return (
    <div>
      <label>摄氏温度：</label>
      <input type="text" value={value} onChange={change} />
    </div>
  )
}

function DemoA() {
  const [temper, setTemper] = useState(0)
  return (
    <div>
      <Fahrenheit value={temper} onChange={val => setTemper(val)}></Fahrenheit>
      <hr />
      <Celsius value={temper} onChange={val => setTemper(val)}></Celsius>
    </div>
  )
}

export default DemoA;